<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Slides - App Intro</title>

    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <style>
      ion-slides {
        height: 100%;
      }

      .swiper-slide {
        display: flex;
        flex-direction: column;
      }

      .swiper-slide img {
        max-width: 300px;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="secondary">
            <ion-button onclick="slidePrev()">Prev</ion-button>
          </ion-buttons>
          <ion-buttons slot="primary">
            <ion-button onclick="slideNext()">Next</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-slides class="slides">
          <ion-slide>
            <img
              src=""
              class="slide-image"
            />
            <div class="ion-padding">
              <h2 class="slide-title">
                Welcome to
                <b>ICA</b>
              </h2>
              <p>
                The
                <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration
                of proper code use.
              </p>
            </div>
          </ion-slide>

          <ion-slide>
            <img
              src=""
              class="slide-image"
            />
            <div class="ion-padding">
              <h2 class="slide-title">What is Ionic?</h2>
              <p>
                <b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps
                with web technologies like HTML, CSS, and JavaScript.
              </p>
            </div>
          </ion-slide>

          <ion-slide>
            <img
              src=""
              class="slide-image"
            />
            <div class="ion-padding">
              <h2 class="slide-title">What is Ionic Pro?</h2>
              <p>
                <b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings
                a totally new level of app development agility to mobile dev teams.
              </p>
            </div>
          </ion-slide>

          <ion-slide>
            <img
              src=""
              class="slide-image"
            />
            <ion-button onclick="toStart()"> Back to the start </ion-button>
          </ion-slide>
        </ion-slides>
      </ion-content>
    </ion-app>
    <script>
      const slides = document.querySelector('.slides');
      slides.pager = true;

      function slideNext() {
        slides.slideNext();
      }

      function slidePrev() {
        slides.slidePrev();
      }

      function toStart() {
        slides.slideTo(0);
      }
    </script>
  </body>
</html>
